<template>
    <div class="container">
        <div class="banner__wrapper">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6">
                    <div class="banner__content banner__content--style2" data-aos="fade-right" data-aos-duration="1000">
                        <div class="banner__content-star">
                            <img src="/images/banner/home2/6.png" alt="star icon">
                            <div class="star-details">
                                <p class="star">5 Stars</p>
                                <span>Read Our <nuxt-link to="/about">Success Stories</nuxt-link></span>
                            </div>
                        </div>
                        <h1>Find Your Perfect Learn Platform</h1>
                        <p class="moto">Our mission is to help people to find the best course online and learn with
                            expert
                            anytime, anywhere
                        </p>
                        <div class="btn-group">
                            <nuxt-link to="/signin" class="trk-btn trk-btn--border trk-btn--secondary2">Get Started
                                <span><i class="fa-solid fa-arrow-right"></i></span> </nuxt-link>
                            <nuxt-link to="/about" class="trk-btn trk-btn--secondary brand-2">Learn More</nuxt-link>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="banner__thumb banner__thumb--style2" data-aos="fade-left" data-aos-duration="1000">
                        <div class="row g-4">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                <div class="banner__thumb-item">
                                    <img class="fist-image" src="/images/banner/home2/1.png" alt="image">
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-6">
                                <div class="banner__thumb-item">
                                    <img src="/images/banner/home2/2.png" alt="image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <div class="banner__icon banner__icon--style1">
        <span class="banner__icon-item banner__icon-item--animation"><img src="/images/banner/home2/3.png"
                alt="roket"></span>
        <span class="banner__icon-item banner__icon-item--animation"><img src="/images/banner/home2/4.png"
                alt="book"></span>
        <span class="banner__icon-item"><img src="/images/banner/home2/5.png" alt="belon"></span>
    </div>
</template>